<template>
  <div id="container"></div>
</template>

<script>
import MapLoader from "@/assets/javascript/AMap.js";
export default {
  data() {
    return {
      map: null,
      position: {
        position: {},
        address: {},
        infoCity: {},
        cityIP: ""
      }
    };
  },
  mounted() {
    this.getLocation();
  },
  methods: {
    // 获取高德地图api
    getLocation() {
      let that = this;
      MapLoader().then(
        AMap => {
          console.log("地图加载成功");
          that.map = new AMap.Map("container", {});
          let geolocation;

          that.map.plugin(["AMap.Geolocation"], function() {
            geolocation = new AMap.Geolocation({
              enableHighAccuracy: true, //  是否使用高精度定位，默认:true
              timeout: 10000, //  超过10秒后停止定位，默认：无穷大
              noIpLocate: 0,
              noGeoLocation: 0,
              GeoLocationFirst: true,
              maximumAge: 0, // 定位结果缓存0毫秒，默认：0
              convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
              showButton: true, //  显示定位按钮，默认：true
              buttonPosition: "LB", // 定位按钮停靠位置，默认：'LB'，左下角
              buttonOffset: new AMap.Pixel(10, 20), //  定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
              showMarker: true, //  定位成功后在定位到的位置显示点标记，默认：true
              showCircle: true, //  定位成功后用圆圈表示定位精度范围，默认：true
              panToLocation: true, //  定位成功后将定位到的位置作为地图中心点，默认：true
              zoomToAccuracy: true //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
            that.map.addControl(geolocation);
            geolocation.getCurrentPosition(function(status, result) {
              console.log("position", result, status);
              that.position.position = result;
            });
            geolocation.getCityInfo((status, result) => {
              console.log("Info", result, status);
              that.position.infoCity = result;
              // this.$store.commit("changeCity", result.city);
              // this.$store.commit(
              //   "changeCityInfo",
              //   "广东省深圳市龙岗区平湖街道富安大道海源城"
              // );
            });
            AMap.event.addListener(geolocation, "complete", result => {
              //返回定位信息
              console.log("add", result.formattedAddress);
              that.position.address = result;
            }); //返回定位信息
            AMap.event.addListener(geolocation, "error", onError => {
              //返回定位出错信息
              console.log("add定位失败", onError);
              // _that.city = "定位失败";
              // _that.getLatLngLocation();
            }); //返回定位出错信息
          });

          that.map.plugin("AMap.CitySearch", function() {
            let citySearch = new AMap.CitySearch();
            citySearch.getLocalCity(function(status, result) {
              if (status === "complete" && result.info === "OK") {
                // 查询成功，result即为当前所在城市信息
                AMap.plugin("AMap.Geocoder", function() {
                  let geocoder = new AMap.Geocoder({
                    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                    city: result.adcode
                  });
                  let lnglat = result.rectangle.split(";")[0].split(",");
                  geocoder.getAddress(lnglat, function(status, data) {
                    if (status === "complete" && data.info === "OK") {
                      // data为对应的地理位置详细信息
                      // console.log(data);
                      // this_.cityIP = data.regeocode.formattedAddress;
                      console.log("ip定位", data.regeocode.formattedAddress);
                      that.position.cityIP = data.regeocode.formattedAddress;
                    } else {
                      // this_.cityIP = "定位失败";

                      console.log(
                        "ip定位失败",
                        data.regeocode.formattedAddress
                      );
                    }
                  });
                });
              }
            });
          });

          that.$emit("geolocation", that.position);
        },
        e => {
          console.log("地图加载失败", e);
        }
      );
    }
  }
};
</script>
